<template>
  <div>
    <div class="block text-center">
      <el-carousel height="240px" style="border-radius: 15px">
        <el-carousel-item style="border-radius: 15px">
          <img src="../assets/image/banner1.webp" alt="" style="width: 100%; height: 100%" />
        </el-carousel-item>
        <el-carousel-item style="border-radius: 15px">
          <img src="../assets/image/banner2.webp" alt="" style="width: 100%; height: 100%" />
        </el-carousel-item>
        <el-carousel-item style="border-radius: 15px">
          <img src="../assets/image/banner3.webp" alt="" style="width: 100%; height: 100%" />
        </el-carousel-item>
        <el-carousel-item style="border-radius: 15px">
          <img src="../assets/image/banner4.webp" alt="" style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
const list = reactive([
  '../image/banner1.webp',
  '../image/banner2.webp',
  '../image/banner3.webp',
  '../image/banner4.webp'
])
console.log(list.values)
</script>

<style lang="scss" scoped>
.demonstration {
  color: var(--el-text-color-secondary);
  border-radius: 15px;
}

.el-carousel__item h3 {
  // color: #475669;
  border-radius: 15px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
  border-radius: 15px;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
  border-radius: 15px;
}
img {
  border-radius: 15px;
}
</style>
